<template>
	<view>
		<u-navbar title="资源调度上报详情" :title-size="36" :title-width="500" title-color="#fff" back-icon-name="arrow-left" back-icon-color="#fff" :background="background" :custom-back="goBack">
		    <view class="navbar-right" slot="right">
		           <view class="message-box right-item" style="padding-right: 40rpx; color: white" @click="goEdit">
		           修改
		           </view>
		     </view>
		</u-navbar>
		<view class="content">
			<u-form :model="form" ref="uForm" label-width="160">
				<u-form-item label="归属事件" prop="eventName" >
					<u-input v-model="form.eventName" type="text" :border="true" disabled/>
				</u-form-item>
				<u-form-item label="所属街道" prop="streetName">
					<u-input v-model="form.streetName" type="text" :border="true" disabled/>
				</u-form-item>
				<u-form-item label="物资名称" class="name"></u-form-item>
				<ul class="materialBox">
					<li v-for="(item,index) in materialList">
						{{item.suppliesName}} <span>{{item.resourceNum}}</span>
						<!-- <u-input v-model="item.suppliesName" type="text" :border="true" disabled placeholder="请选择物资名称"/>
						<u-input v-model="item.resourceNum" type="text" :border="true" disabled placeholder="请输入数量"/> -->
					</li>
				</ul>
				
				<u-form-item label="防汛队伍" class="name"></u-form-item>
				<ul class="teamBox">
					<li>
						队伍数量 <span>{{form.teamNum}}</span>
					</li>
					<li>
						总人数 <span>{{form.personNum}}</span>
					</li>
				</ul>
				<!-- <u-form-item label="队伍数量:">
					<u-input v-model="form.teamNum" type="text" :border="true" disabled placeholder="请输入防汛队伍数量"/>
				</u-form-item>
				<u-form-item label="队伍人数:">
					<u-input v-model="form.personNum" type="text" :border="true" disabled placeholder="请输入防汛队伍人数"/>
				</u-form-item>	 -->		
			</u-form>
		</view>
		<!-- 底部导航 -->
		<!-- <u-tabbar :list="tabbarList" height="40px"></u-tabbar> -->
	</view>
</template>

<script>
	export default {
		onLoad(option) {
			console.log(JSON.parse(decodeURIComponent(option.list)))
			let list = JSON.parse(decodeURIComponent(option.list));
			this.list = list
			this.form = list
			this.form.eventName = list.name
		},
		data() {
			return {
				background: {
					backgroundColor: '#4299f7',
				},
				materialList:[],
				form: {
					eventName: '',
					streetName:'',
					incidentId:'',
					streetId:'',
					teamNum:'',
					personNum:''
				},
				rules: {
					eventName: [
						{
							required: true,
							message: '请选择事件',
							trigger: ['change','blur']
						},
					],
					streetName: [
						{
							required: true,
							message: '请选择街道',
							trigger: ['change','blur']
						},
					]
				}
			}
		},
		computed: {
			tabbarList (){
				return this.$store.state.common.tabbarList
			}
		},
		methods: {
			goBack() {
				uni.navigateBack()
			},
			
			getIncidentMaterial(){  //获取当前事件 街道对应的内容
				let params = {
					incidentId:this.form.incidentId,
					streetId:this.form.streetId,
				}
				this.$api.reqApi.getIncidentMaterial(params).then(res => {
					if(res.code == 200){
						this.materialList = res.data.supplies
						if( res.data.team.length>0){
							this.form.teamNum = res.data.team[0].teamNum
							this.form.personNum = res.data.team[0].personNum
						}
					}
				})
			},
			
			goEdit(){uni.navigateTo({url: '/pages/scheduling/resourceReport/index?list='+ encodeURIComponent(JSON.stringify(this.form))})},
							
		},
		mounted() {
			this.getIncidentMaterial()
		}
	}
</script>

<style lang="scss" scoped>
uni-page-body{
	background-color: #fff;
}
.content{
	background-color: #fff;
	padding: 20rpx 30rpx;
	margin-bottom: 40rpx;
}
.name{
	border-bottom: 0;
	::v-deep .u-form-item--left__content__label{
		color: #333;
	}
}
.materialBox,.teamBox{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	li{
		margin-bottom: 20rpx;
		width: 48%;
		flex: inherit;
		background-color: #f6f8fa;
		padding: 0 30rpx !important;
		box-sizing: border-box;
		line-height: 78rpx;
		display: flex;
		justify-content: inherit;
		flex-wrap: wrap;
	}
}
</style>
